{% extends 'base_dashboard.html' %}

{% block title %}{{ action }} Course — Online LMS{% endblock %}

{% block extra_css %}
<style>
  .tcf-section {
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: #1a56db;
    display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; margin-top: .25rem;
  }
  .tcf-section::after { content: ''; flex: 1; height: 1px; background: #e5e7eb; }
  .tcf-tip {
    border-radius: .75rem; padding: .875rem 1rem;
    border-left: 3px solid currentColor; font-size: .8rem; line-height: 1.5;
  }
  #thumbPreview { display: none; max-height: 180px; width: 100%; object-fit: cover;
    border-radius: .625rem; border: 1px solid #e5e7eb; }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-start mb-4">
    <div>
        <h4 class="fw-bold mb-1">{{ action }} Course</h4>
        <p class="text-muted small mb-0">{% if action == 'Create' %}Add a new course to your portfolio{% else %}Update course information{% endif %}</p>
    </div>
    <a href="{% url 'dashboard:teacher' %}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left me-1"></i>Back to Dashboard
    </a>
</div>

<form method="post" enctype="multipart/form-data" novalidate>
{% csrf_token %}
{% if form.non_field_errors %}
<div class="alert alert-danger rounded-3 small mb-3">
    {% for error in form.non_field_errors %}<div>{{ error }}</div>{% endfor %}
</div>
{% endif %}

<div class="row g-4 align-items-start">

    <!-- ── Left: main form ───────────────────────────────── -->
    <div class="col-lg-8">

        <!-- Basic Information -->
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <div class="tcf-section"><i class="bi bi-info-circle"></i>Basic Information</div>
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label fw-medium small">Course Title <span class="text-danger">*</span></label>
                        {{ form.title }}
                        {% if form.title.errors %}<div class="text-danger small mt-1">{{ form.title.errors.0 }}</div>{% endif %}
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-medium small">Category</label>
                        {{ form.category }}
                        <div class="form-text small">Helps learners filter this course.</div>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-medium small">Short Description <span class="text-danger">*</span></label>
                        {{ form.short_description }}
                        {% if form.short_description.errors %}<div class="text-danger small mt-1">{{ form.short_description.errors.0 }}</div>{% endif %}
                        <div class="form-text small">Displayed on course listings. Keep under 120 characters.</div>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-medium small">Full Description <span class="text-danger">*</span></label>
                        {{ form.full_description }}
                        {% if form.full_description.errors %}<div class="text-danger small mt-1">{{ form.full_description.errors.0 }}</div>{% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Pricing & Schedule -->
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <div class="tcf-section"><i class="bi bi-calendar-week"></i>Pricing &amp; Schedule</div>
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label fw-medium small">Price ({{ site_settings.currency_symbol }})</label>
                        <div class="input-group">
                            <span class="input-group-text">{{ site_settings.currency_symbol }}</span>
                            {{ form.price }}
                        </div>
                        {% if form.price.errors %}<div class="text-danger small mt-1">{{ form.price.errors.0 }}</div>{% endif %}
                        <div class="form-text small">Enter 0 for a free course.</div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-medium small">Duration <span class="text-danger">*</span></label>
                        {{ form.duration }}
                        {% if form.duration.errors %}<div class="text-danger small mt-1">{{ form.duration.errors.0 }}</div>{% endif %}
                        <div class="form-text small">e.g. &ldquo;8 weeks&rdquo; or &ldquo;40 hours&rdquo;</div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-medium small">Status <span class="text-danger">*</span></label>
                        {{ form.status }}
                        {% if form.status.errors %}<div class="text-danger small mt-1">{{ form.status.errors.0 }}</div>{% endif %}
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-medium small">Start Date</label>
                        {{ form.start_date }}
                        {% if form.start_date.errors %}<div class="text-danger small mt-1">{{ form.start_date.errors.0 }}</div>{% endif %}
                        <div class="form-text small">Enrollment opens from this date.</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-medium small">End Date</label>
                        {{ form.end_date }}
                        {% if form.end_date.errors %}<div class="text-danger small mt-1">{{ form.end_date.errors.0 }}</div>{% endif %}
                        <div class="form-text small">Course closes on this date.</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Action buttons -->
        <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary px-4 fw-semibold">
                <i class="bi bi-check-circle me-2"></i>{{ action }} Course
            </button>
            <a href="{% url 'dashboard:teacher' %}" class="btn btn-outline-secondary px-4">Cancel</a>
        </div>
    </div>

    <!-- ── Right: sidebar ────────────────────────────────── -->
    <div class="col-lg-4">

        <!-- Thumbnail -->
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <div class="tcf-section"><i class="bi bi-image"></i>Course Thumbnail</div>

                {% if form.instance.thumbnail %}
                <div class="mb-3">
                    <img src="{{ form.instance.thumbnail.url }}" id="thumbPreview"
                         style="display:block;" alt="Current thumbnail">
                    <div class="form-text small mt-1">Upload a new image to replace.</div>
                </div>
                {% else %}
                <div class="rounded-3 d-flex align-items-center justify-content-center mb-3"
                     id="thumbPlaceholder"
                     style="height:150px;background:#f0f4ff;border:2px dashed #bfdbfe;">
                    <div class="text-center">
                        <i class="bi bi-image" style="font-size:2rem;color:#1a56db;opacity:.4;"></i>
                        <div class="small text-muted mt-1">Preview appears here</div>
                    </div>
                </div>
                <img id="thumbPreview" src="" alt="Preview">
                {% endif %}

                {{ form.thumbnail }}
                {% if form.thumbnail.errors %}<div class="text-danger small mt-1">{{ form.thumbnail.errors.0 }}</div>{% endif %}
            </div>
        </div>

        <!-- Status guide -->
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <div class="tcf-section"><i class="bi bi-toggles"></i>Status Guide</div>
                <div class="d-flex flex-column gap-2">
                    <div class="tcf-tip" style="background:#dcfce7;color:#15803d;border-color:#15803d;">
                        <strong>Published</strong> — Visible to students &amp; open for enrollment.
                    </div>
                    <div class="tcf-tip" style="background:#f3f4f6;color:#374151;border-color:#9ca3af;">
                        <strong>Draft</strong> — Hidden from students. Safe to keep editing.
                    </div>
                </div>
            </div>
        </div>

        <!-- Tips -->
        <div class="card border-0 rounded-4" style="background:#eff6ff;">
            <div class="card-body p-4">
                <div class="fw-semibold small text-primary mb-2"><i class="bi bi-lightbulb me-1"></i>Tips</div>
                <ul class="mb-0 ps-3 small text-muted" style="line-height:1.8;">
                    <li>Use a clear, keyword-rich title.</li>
                    <li>Short description appears on course cards.</li>
                    <li>Thumbnail: 16:9 ratio, at least 800×450px.</li>
                    <li>Keep status <em>Draft</em> while building; publish when ready.</li>
                </ul>
            </div>
        </div>
    </div>

</div>
</form>
{% endblock %}

{% block extra_js %}
<script>
(function () {
    var inp = document.querySelector('input[type="file"][name="thumbnail"]');
    var preview = document.getElementById('thumbPreview');
    var placeholder = document.getElementById('thumbPlaceholder');
    if (!inp || !preview) return;
    inp.addEventListener('change', function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                preview.src = e.target.result;
                preview.style.display = 'block';
                if (placeholder) placeholder.style.display = 'none';
            };
            reader.readAsDataURL(this.files[0]);
        }
    });
})();
</script>
{% endblock %}